<template>
    <el-dialog custom-class="my-register" title="用户注册" :visible="isRegisterVisible" width="400px">
        <!-- hide-required-asterisk 属性指定是否隐藏必填字段旁边的红色星号 -->
        <el-form status-icon ref="refRuleForm" :rules="rules" :model="ruleForm" label-width="80px" size="small" :hide-required-asterisk="true">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="账号" prop="account">
                        <span class="is-must">*</span>
                        <el-input v-model="ruleForm.account" placeholder="请输入账号"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="密码" prop="password">
                        <span class="is-must">*</span>
                        <el-input v-model="ruleForm.password" show-password placeholder="请输入密码"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="确认密码" prop="confirmPassword">
                        <span class="is-must">*</span>
                        <el-input v-model="ruleForm.confirmPassword" show-password placeholder="请再次输入密码"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
                 <span class="register-footer">
                <el-button @click="closeViews" size="small">取 消</el-button>
                <el-button type="primary" @click="submitForm" size="small">确 定</el-button>
              </span>
        </template>
    </el-dialog>
</template>

<script>
import {reactive, ref, toRefs} from '@vue/reactivity'
import {ElMessage} from 'element-plus'
import md5 from 'js-md5'
import UserApi from '../Api/user2'

export default {
    name: "register",
    model: {
        value: 'isRegisterVisible',
        events: 'closeViews'
    },
    props: {
        isRegisterVisible: {
            type: Boolean,
            default: false
        }
    },
    setup(props, context) {
        const form = reactive({
            ruleForm: {
                account: '',
                password: '',
                confirmPassword: ''
            }
        })

        const validateAccount = (rule, value, callback) => {
            console.log('检验-account: ' + value)
            callback()
        }

        const validatePass = (rule, value, callback) => {
            console.log('检验-password: ' + value)
            // 检查是否包含大小写字母、数字、特殊字符，且长度在6-16
            // let regex = new RegExp('(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9]).{6,16}')
            // let regex2 = new RegExp('^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\!\@\#\$\%\^\&\*\(\)]).{6,16}')

            let regx1 = /\d/
            let regx2 = /[A-Z]/
            let regx3 = /[a-z]/
            let regx4 = /[!@#$%^&*()]/
            let level = 0

            if (value === '') {
                callback(new Error('请输入密码'))
            }
            if (regx1.test(value)) { level++ }
            if (regx2.test(value)) { level++ }
            if (regx3.test(value)) { level++ }
            if (regx4.test(value)) { level++ }
            console.log(level)
            if (level < 3) {
                callback(new Error('密码需要包含大小写字母、数字和特殊字符中的三种'))
            }
            if (form.ruleForm.confirmPassword !== '') {
                refRuleForm.value.validateField('confirmPassword')
                // 此处使用this.$refs的方式会获取不到，这个应该跟vue的生命周期有关，学艺不精不会用，先搁这儿
                // this.$refs.refRuleForm.validateField('confirmPassword')
            }
            callback()
        }

        const validateConfirmPass = (rule, value, callback) => {
            console.log('检验-confirmPassword: ' + value)
            if (value === '') {
                callback(new Error('请再次输入密码'))
            } else if (form.ruleForm.password !== '' && value !== form.ruleForm.password) {
                callback(new Error('两次输入密码不一致!'))
            } else {
                callback()
            }
        }

        const rules = {
            account: [
                {required: true, message: '请输入账号', trigger: 'blur'},
                {validator: validateAccount, trigger: 'blur'}
            ],
            password: [
                {required: true, message: '请输入密码', trigger: 'blur'},
                {min: 6, max: 16, message: '长度在6到16个字符', trigger: 'blur'},
                {validator: validatePass, trigger: 'blur'}
            ],
            confirmPassword: [
                {required: true, message: '请再次输入密码', trigger: 'blur'},
                {min: 6, max: 16, message: '长度在6到16个字符', trigger: 'blur'},
                {validator: validateConfirmPass, trigger: 'blur'}
            ]
        }

        const refRuleForm = ref(null)
        const submitForm = () => {
            refRuleForm.value.validate((valid) => {
                if (valid) {
                    const formData = {...form.ruleForm}
                    const user = {
                        account: formData.account,
                        password: md5(formData.password)
                    }
                    console.log(formData)
                    console.log(user)
                    UserApi.register(user).then((res) => {
                        ElMessage.success('注册成功')
                        toLogin()
                    }).catch((err) => {
                        ElMessage.error('注册失败')
                    })
                }
            })
        }

        const closeViews = () => {
            refRuleForm.value.resetFields()
            context.emit('closeViews', false)
        }

        const toLogin = () => {
            refRuleForm.value.resetFields()
            context.emit('toLogin')
        }

        return {
            ...toRefs(form),
            closeViews,
            toLogin,
            submitForm,
            refRuleForm,
            rules
        }

    }
}
</script>

<style scoped lang="scss">
.my-register {
    background: red;

    .is-must {
        position: absolute;
        color: #F56C6C;
        left: -90px;
    }
}

.my-register /deep/ .el-register__header {
    border-bottom: 1px solid #eee !important;
}

.my-register /deep/ .el-register__title {
    font-size: 16px;
    color: #e03b5d;
}

/deep/ .el-form-item__label {
    text-align: justify;
    text-align-last: justify;
    //text-justify: distribute-all-lines;
}

</style>
